<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <el-form ref="form" size="mini" :model="form" :rules="rules" label-width="80px">
        <el-form-item prop="start_time" label="创建时间">
          <el-date-picker v-model="showTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
        </el-form-item>
        <el-form-item prop="export_arr" label="导出内容">
          <el-checkbox-group v-model="form.export_arr">
            <el-checkbox v-for="item in listContent" :key="item.value" :label="item.value" :disabled="item.count === 0">{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item style="margin-bottom: 0; margin-top: 40px">
          <div class="panel-line flex-end">
            <el-button @click="onCancel">取消</el-button>
            <el-button :loading="loading" type="primary" @click="onSubmit" :disabled="form.export_arr.length === 0">立即导出</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { apiAssetExport, apiDuxExport, apiNoticeExport } from '@/api/dataStatistics'
import { formatDate } from '@/utils'

export default {
  name: 'DialogApply',
  props: {
    type: {
      type: String,
      default: 'assets',
    },
    time: Object,
  },
  data() {
    return {
      loading: false,
      apiList: [
        { type: 'assets', title: '资产统计数据导出', api: apiAssetExport },
        { type: 'alone', title: '独享统计数据导出', api: apiDuxExport },
        { type: 'notice', title: '拍卖统计数据导出', api: apiNoticeExport },
      ],
      listContent: [
        { value: 0, label: '每日发布量' },
        { value: 1, label: '分类统计（一级分类）' },
        { value: 2, label: '分类统计（末级分类）' },
        { value: 3, label: '地区统计（省份）' },
        { value: 4, label: '分类及地区统计（一级分类&省份）' },
        { value: 5, label: '分类及地区统计（二级分类&省份）' },
      ],
      form: {
        start_time: '',
        end_time: '',
        export_arr: [0],
      },
      rules: {
        start_time: [{ required: true, message: '请选择创建时间', trigger: 'change' }],
        export_arr: [{ required: true, message: '请选择导出内容', trigger: 'change' }],
      },
      showTime: [],
    }
  },
  watch: {
    showTime() {
      if (this.showTime) {
        this.form.start_time = this.showTime[0]
        this.form.end_time = this.showTime[1]
      } else {
        this.form.start_time = this.form.end_time = ''
      }
    },
  },
  mounted() {
    this.init()
  },
  destroyed() {},
  methods: {
    init() {
      if (this.time) {
        const { start_time, end_time } = this.time
        this.showTime = [start_time, end_time]
      }
    },
    // 取消
    onCancel() {
      this.$emit('close')
    },
    // 立即申领
    onSubmit() {
      this.$refs['form'].validate((valid, message) => {
        if (valid) {
          this.loading = true
          const exportTypeItem = this.apiList.find((item) => item.type === this.type)
          exportTypeItem
            .api(this.form)
            .then((res) => {
              this.download(res, exportTypeItem.title)
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
    // 下载文件
    download(res, name) {
      let blob = new Blob([res], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      })
      let blobUrl = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.style.displav = 'none'
      a.download = name
      a.href = blobUrl
      a.click()
      this.$message({
        message: '导出成功',
        type: 'success',
      })
      setTimeout(() => {
        this.loading = false
        this.$emit('close')
      }, 1000)
    },
  },
}
</script>

<style scoped lang="scss">
.el-checkbox-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
</style>
